<template>
	<view class="shopping_box">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>

		<!-- 头部 -->
		<view class="top">
			<view class="top_left">
				<image
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/psstcaof2tsy06ahlebhdz54z8dw2u8la8o3133b811-ee65-4d33-9050-1e39508ce174"
					mode=""></image>
				<text>智慧社区</text>
				<image
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps2nq9po98gns6hqkm72q1ub6oe9eqgihr979825385-8a66-4582-b76f-2c6bb120d0c2"
					mode=""></image>
			</view>
			<view class="top_right">
				<image
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps9pveig1oa7a5wdmz4bnh456sjb492d3ua42b7fe8b-324a-4e3f-a2da-306ede1fb19a"
					mode=""></image>
			</view>
		</view>

		<!-- 输入框 -->
		<view class="inp_box">
			<image
				src="https://lanhu.oss-cn-beijing.aliyuncs.com/psbh301unbxsfi7j207vl4r8dlowc0rrqa7ddbb2aa-5c7b-4cb9-93e7-965b46babd26"
				mode=""></image>
			<view class="inp">
				<u-input placeholder="进口特价红酒" />
			</view>
		</view>

		<!-- 生鲜速递 -->
		<view class="fresh">
			<image
				src="https://lanhu.oss-cn-beijing.aliyuncs.com/psensyzfc73jb7jpxhuy8c9i0q7yspvqipnd7dee00e9-91ff-473d-8c87-1010b918110a"
				mode=""></image>
		</view>

		<!-- 横向滚动菜单栏 -->
		<view class="scroll">
			<scroll-view :scroll-x="true" class="scrollview-box">
				<block v-for="item in scrollData" :key="item.text">
					<view class="item">
						<view class="pic">
							<!-- <image src="../../static/imgs/accepting.png" class="cover" mode="aspectFill"></image> -->
						</view>
						<text class="name">{{item.text}}</text>
					</view>
				</block>
			</scroll-view>
		</view>

		<!-- 限时秒杀 -->
		<view class="center_box">
			<view class="time_box">
				<view class="tit">
					<image
						src="https://lanhu.oss-cn-beijing.aliyuncs.com/psw1a1r7grvilmk8uyiypqutlonvhzhd589d4938-ccc8-4975-8785-f164f230dcb2"
						mode=""></image>
					<text>{{hour}}</text>
					<view class="span_box">
						<span></span>
						<span></span>
					</view>
					<text>{{minute}}</text>
					<view class="span_box">
						<span></span>
						<span></span>
					</view>
					<text>{{second}}</text>
				</view>
				<view class="txt">低价爆品 天天来天天有</view>
				<view class="img_box">
					<view class="img_l">
						<image
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps92vc1o448n4pnwn6tp28nen7uz1tco0v6bceee2d-4f2e-4c5c-ab9e-5ad8b357756d"
							mode=""></image>
						<view class="price">
							<text>￥5.69</text>
							<span>￥7.99</span>
						</view>
					</view>
					<view class="img_r">
						<image
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps7zhc4c8elnfj3y8f6rva4j35agsi7ppb2f30148-c9cb-4911-8f02-b7e402ade119"
							mode=""></image>
						<view class="price">
							<text>￥5.69</text>
							<span>￥7.99</span>
						</view>
					</view>
				</view>
			</view>
			<view class="vip_box">
				<view class="tit">
					<text>周二会员日</text>
					<view class="vip_txt">
						<span>VIP</span>
					</view>
				</view>
				<view class="gifts">
					<image
						src="https://lanhu.oss-cn-beijing.aliyuncs.com/psgj6y8jx4e9h8y1xwgioqkrbc6dgqf8jddace93c9a-9b1a-4ddd-a9f6-ca233c8c1631"
						mode=""></image>
					<text>抽七夕兰蔻套装</text>
				</view>
				<view class="pic">
					<view class="pic_left">
						<image
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/psv0ct9q1tt4eqsz0y551qlcxbdeo2a4wn3b0dceb5-bac2-4cbe-87ea-0e71d8a324f2"
							mode=""></image>
						<view class="price">
							￥74.9
						</view>
					</view>
					<view class="pic_right">
						<image
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/psdlksgvuloej3dtbrxfok7mkgecwtxjh9913a003-5759-4b05-93a4-da0f0f65dee6"
							mode=""></image>
						<view class="price">
							￥74.9
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- // 热销推荐 -->
		<view class="hotsale">
			<view class="hotsale_tit">
				<view class="border_box">
					<view class="border_1"></view>
					<view class="border_2 border_left"></view>
				</view>
				<view class="circle"></view>
				<view class="txt">热销推荐</view>
				<view class="circle"></view>
				<view class="border_box">
					<view class="border_1"></view>
					<view class="border_2"></view>
				</view>
			</view>
			<view class="hotsale_content">
				<view class="content_box" v-for="item in hotList" :key="item.tit">
					<image :src="item.image" mode="" :style="{width:item.W+'rpx',height:item.H+'rpx',margin: [item.T+'rpx', item.R+'rpx', item.B+'rpx', item.L+'rpx']}"></image>
					<view class="shop_name indent">{{item.tit}}</view>
					<view class="shop_info indent">{{item.info}}</view>
					<view class="shop_price indent">
						<view class="">
							<text class="txt_1">到手&nbsp￥</text>
							<text class="txt_2"><span>{{item.price}}</span></text>
						</view>
						<view class="shop_juan">{{item.amount}}元券</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;width: 100rpx;background-color: #F9F9F9;"></view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotList: [{
					image: 'https://lanhu.oss-cn-beijing.aliyuncs.com/psejgtg156gfgnd8yr8qdtqsxxbooksc4tp34926660-1175-46b3-b47d-c8687f80d946',
					tit: '同仁堂保健品',
					info: '百年老店 正品保障',
					price: "69.9",
					amount: 5,
					W:152,
					H:242,
				}, {
					image: 'https://lanhu.oss-cn-beijing.aliyuncs.com/psevmhsto829l4ivn440l0q30mcaimy0mdroc108b6e2-b866-461f-9ad0-c769a8abed96',
					tit: '泡吧牛奶面包',
					info: '奶香松软  整箱800g  营养早...',
					price: "35.9",
					amount: 5,
					W:278,
					H:278,
				}],
				scrollData: [{
						text: "粮油",
					},
					{
						text: "蔬菜",
					},
					{
						text: "肉类",
					},
					{
						text: "水产",
					},
					{
						text: "酒水",
					},
					{
						text: "日常用品",
					}
				],
				hour: 0, //时
				minute: 0, //分
				second: 0, //秒
				timer: null, //重复执行
			};
		},
		methods: {
			showtime() {
				var nowtime = new Date(), //获取当前时间
					endtime = new Date("2022/12/04"); //定义结束时间
				var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
						(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
						24), //计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数
				this.hour = lefth //返回倒计时的字符串
				this.minute = leftm //返回倒计时的字符串
				this.second = lefts //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					this.countdownh = this.countdownm = this.countdowns = "00"
				}
			}
		},
		onLoad() {
			this.timer = setInterval(() => {
				this.showtime()
			})
		}
	};
</script>

<style scoped lang="scss">
	.shopping_box {
		position: relative;
		width: 100%;
		// height: 1624rpx;
		overflow: hidden;
		background-color: #fff;
	}

	// 头部
	.top {
		display: flex;
		justify-content: space-between;
		margin: 86rpx 28rpx 0 28rpx;
		align-items: center;

		.top_left {
			display: flex;
			align-items: center;
		}

		.top_left image:first-child {
			width: 40rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}

		text {
			font-size: 34rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #02030E;
			margin-right: 10rpx;
			// line-height: 35px;
		}

		.top_left image:last-child {
			width: 18rpx;
			height: 10rpx;
		}

		.top_right image {
			width: 50rpx;
			height: 42rpx;
		}
	}

	// 输入框
	.inp_box {
		width: 696rpx;
		height: 82rpx;
		position: relative;
		margin: auto;
		border-radius: 40rpx;
		margin-top: 22rpx;

		image {
			position: absolute;
			left: 36rpx;
			top: 26rpx;
			width: 28rpx;
			height: 28rpx;
		}

		.inp {
			width: 100%;
			height: 100%;
			background: #FFFFFF;
			box-shadow: 0px 1px 7px 0px rgba(36, 36, 36, 0.09);
			border-radius: 40rpx;
			text-indent: 68rpx;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #666666;
			display: flex;
			align-items: center;
		}
	}

	// 生鲜速递
	.fresh {
		text-align: center;
		margin-top: 20rpx;

		image {
			width: 698rpx;
			height: 206rpx;
		}
	}

	// 横向滚动菜单栏
	.scroll {

		scroll-view ::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
			color: transparent;
		}

		.scrollview-box {
			white-space: nowrap; // 滚动必须加的属性
			padding-left: 58rpx;
		}

		.item {
			display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
			flex-direction: column;
			align-items: center;
			border-radius: 28rpx;
			margin-right: 58rpx;
			text-align: center;

			.pic {
				width: 72rpx;
				height: 72rpx;
				background: #901EAE;
				border-radius: 28rpx;
			}
		}

		.cover {
			width: 165rpx;
			height: 165rpx;
		}

		.name {
			font-size: 22rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #333333;
			line-height: 54rpx;
		}
	}

	// 限时秒杀
	.center_box {
		display: flex;

		.time_box {
			width: 338rpx;
			height: 278rpx;
			background: #FADEDD;
			border-radius: 18rpx;
			margin: 0 20rpx 0 28rpx;
			box-shadow: 0px 1px 7px 0px rgba(36, 36, 36, 0.09);
			background: linear-gradient(220deg, #FADEDD 0%, #fff 100%);

			.tit {
				display: flex;
				align-items: center;
				margin: 18rpx 0 0 18rpx;

				image {
					width: 134rpx;
					height: 30rpx;
					margin-right: 4rpx;
				}

				text {
					width: 32rpx;
					height: 28rpx;
					background: linear-gradient(-45deg, #F56A2C 0%, #FC3D37 100%);
					border-radius: 6rpx;
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 28rpx;
					text-align: center;
				}

				.span_box {
					display: flex;
					flex-direction: column;

					span {
						display: block;
						width: 4rpx;
						height: 4rpx;
						background: #FC3D37;
						border-radius: 50%;
						margin: 2rpx 4rpx;
					}
				}
			}


			.txt {
				font-size: 22rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #908A86;
				text-indent: 18rpx;
				line-height: 44rpx;
			}

			.img_box {
				display: flex;
				justify-content: space-around;

				.img_l image {
					width: 164rpx;
					height: 146rpx;
					vertical-align: top;
				}

				.img_r image {
					vertical-align: top;
					width: 156rpx;
					height: 150rpx;
				}

				.price text {
					display: inline-block;
					width: 86rpx;
					height: 30rpx;
					background: linear-gradient(90deg, #F13B19 0%, #F7812E 100%);
					border-radius: 6rpx;
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 30rpx;
					text-align: center;
					margin-right: 8rpx;
				}

				.price span {
					text-decoration: line-through;
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #5E5C5E;
				}
			}
		}

		// 周二会员日
		.vip_box {
			width: 338rpx;
			height: 278rpx;
			border-radius: 18rpx;
			box-shadow: 0px 1px 7px 0px rgba(36, 36, 36, 0.09);
			background: linear-gradient(200deg, #FCEDDA 0%, #fff 100%);

			.tit {
				display: flex;
				align-items: center;
				margin: 20rpx 0 0 20rpx;
				line-height: 0;
			}

			.tit text {
				font-size: 28rpx;
				font-family: STHupo;
				font-weight: 400;
				color: #000000;
				margin-right: 14rpx;
			}

			.vip_txt {
				width: 72rpx;
				height: 28rpx;
				background: linear-gradient(93deg, #F8D5A8 0%, #FCE2BF 100%);
				// background-image: url("https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a5764a3fc73d4c009ed34a85fed39699_mergeImage.png");
				border-radius: 14rpx;
				text-align: center;
				line-height: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;

				span {
					font-size: 20rpx;
					color: #5C3A1E;
				}
			}

			.gifts {
				display: flex;
				align-items: center;
				margin: 4rpx 0 4rpx 20rpx;
				line-height: 0;

				image {
					width: 24rpx;
					height: 26rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #908A86;
				}
			}

			.pic {
				display: flex;
				align-items: center;

				.pic_left {
					margin: 0 46rpx 0 44rpx;

					image {
						width: 100rpx;
						height: 142rpx;
					}
				}

				.pic_right image {
					width: 126rpx;
					height: 152rpx;
				}

				.price {
					width: 106rpx;
					height: 28rpx;
					background: #F9ECD1;
					border-radius: 6rpx;

					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #402C25;
					line-height: 28rpx;
					margin: auto;
				}
			}
		}
	}

	// 热销推荐
	.hotsale {
		margin-top: 44rpx;

		.hotsale_tit {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.txt {
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #F56C27;
		}

		.border_box {
			width: 220rpx;
			height: 2rpx;
			position: relative;
		}

		.border_1 {
			width: 100%;
			height: 100%;
			background-color: #999;
			opacity: 0.2;
		}

		.border_2 {
			width: 104rpx;
			height: 100%;
			background-color: #F56C27;
			position: absolute;
			top: 0;
		}

		.border_left {
			right: 0;
		}

		.circle {
			width: 10rpx;
			height: 10rpx;
			background: #C92B0A;
			border-radius: 50%;
			margin: 0 10rpx;
		}

		.hotsale_content {
			display: flex;
			justify-content: space-around;
			margin-top: 18rpx;
		}

		.content_box {
			width: 338rpx;
			height: 436rpx;
			background: #FFFFFF;
			box-shadow: 0px 1px 7px 0px rgba(36, 36, 36, 0.14);
			border-radius: 18rpx;
		}

		.indent {
			padding-left: 10rpx;
		}

		.shop_name {
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #333333;
			line-height: 44rpx;
		}

		.shop_info {
			font-size: 22rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
		}

		.shop_price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 16rpx;
			line-height: 0;
		}

		.shop_price .txt_1 {
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #F77E2C;
		}

		.shop_price .txt_2 {
			color: rgba(247, 126, 44, 1);
			font-size: 36rpx;
			font-family: SourceHanSansCN-Medium;
			text-align: left;
		}

		.shop_juan {
			width: 73rpx;
			height: 37rpx;
			text-align: center;
			font-size: 10rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psm19jmxzqk8ac1rka8uzptuf87z2vtzqkada4dd67c-57b8-40e6-a18e-29c18e426d3b) 100% no-repeat;
			background-size: 100% 100%;
			margin-right: 18rpx;
			line-height: 37rpx;
		}
	}
</style>
